<template>
  <div class="skills-page">
    <div class="skills-header">
      <el-button type="primary" @click="insertsSkills">增加个人技能</el-button>
    </div>
    <div class="skills-body">
      <el-table :data="userList" style="width: 100%">
        <el-table-column label="技能类别" width="180" prop="project_name">
          <template slot-scope="scope">
            <span>{{scope.row.skill_cate?scope.row.skill_cate.label:''}}</span>
          </template>
        </el-table-column>
        <el-table-column label="技能等级" width="100" prop="project_duty">
          <template slot-scope="scope">
            <span>{{scope.row.skill_level?scope.row.skill_level.label:''}}</span>
          </template>
        </el-table-column>
        <el-table-column label="技能名称" width="200" prop="skill_name">
        </el-table-column>
        <el-table-column label="技能介绍" prop="skill_desc">
        </el-table-column>
        <el-table-column label="创建时间" width="100" prop="time">
        </el-table-column>
        <el-table-column label="操作" align="right" width="200">
          <template slot-scope="scope">
            <el-button size="mini" type="info"
            :disabled="token !== scope.row.userId" @click="handleEdit(scope.row)">
              编辑
            </el-button>
            <el-button size="mini" type="danger"
            :disabled="token !== scope.row.userId" @click="handleDelete(scope.row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog class="form-el-dialog" title="个人技能信息" :visible.sync="dialogVisible" width="60%">
      <skills-form :dialog-visible.sync="dialogVisible"
      :user-item="userItem" :skillcate-list="skillcateList"
      :skilllevel-list="skilllevelList"></skills-form>
    </el-dialog>
    <div>jobIntention -> 技能</div>
  </div>
</template>

<script>
// import UserApi from '@/api/user';
import OptionsApi from '@/api/options';
import SkillsApi from '@/api/skills';
import OptionsData from '@/utils/optionsData';
import moment from 'moment';
import { getToken } from '@/utils/auth';
import SkillsForm from './components/SkillsForm.vue';

export default {
  name: 'skills',
  components: {
    SkillsForm,
  },
  data() {
    return {
      userList: [],
      skillcateList: [],
      skilllevelList: [],
      dialogVisible: false,
      userItem: null,
    };
  },
  async mounted() {
    this.token = parseInt(getToken(), 10);
    const arr = ['skillcate', 'skilllevel'];
    const getarr = [];
    arr.forEach((item) => {
      const obj = OptionsData.find(a => a.label === item) || null;
      if (obj) {
        getarr.push(obj.type);
      }
    });
    await OptionsApi.getList(getarr)
      .then((rec) => {
        const recData = rec.data;
        if (recData.length > 0) {
          recData.forEach((item) => {
            const c = {
              value: item.id,
              label: item.value,
            };
            if (item.label === 'skillcate') {
              this.skillcateList.push(c);
            }
            if (item.label === 'skilllevel') {
              this.skilllevelList.push(c);
            }
          });
        }
      })
      .catch(() => {});
    // 获取项目训列表
    this.getList();
  },
  methods: {
    insertsSkills() {
      this.dialogVisible = true;
    },
    // 获取项目训列表
    getList() {
      SkillsApi.getSkillList()
        .then((rec) => {
          if (rec.data) {
            this.userList = rec.data.map((item) => {
              const obj = item;
              obj.skill_cate = this.skillcateList.find(
                i => i.value === parseInt(obj.skill_cate, 10),
              );
              obj.skill_level = this.skilllevelList.find(
                i => i.value === parseInt(obj.skill_level, 10),
              );
              obj.time = moment(obj.time * 1000).format('YYYY-MM-DD');
              obj.userId = obj.u_id;
              return obj;
            });
          } else {
            this.userList = [];
          }
        })
        .catch(() => {
          this.userList = [];
        });
    },
    // 编辑
    handleEdit(data) {
      this.userItem = data;
      this.dialogVisible = true;
    },
    // 删除
    handleDelete(i) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          SkillsApi
            .delSkill(i.id)
            .then((res) => {
              if (res.data) {
                this.$message({
                  type: 'success',
                  message: '删除成功!',
                });
                this.getList();
              } else {
                this.$message({
                  type: 'info',
                  message: '删除失败!',
                });
              }
            })
            .catch(() => {
              this.$message({
                type: 'info',
                message: '删除失败!',
              });
            });
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          });
        });
    },
  },
  watch: {
    dialogVisible() {
      if (!this.dialogVisible) {
        this.userItem = null;
        this.getList();
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.skills-page {
  width: 100%;
  padding: 15px;
  position: relative;
  .skills-header,
  .skills-body {
    padding: 10px 10px;
    margin-bottom: 10px;
    background-color: #ffffff;
  }
}
</style>
